<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico"/>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">

    <link rel="stylesheet" href="../../layui/extend/dtree.css">
    <link rel="stylesheet" href="../../layui/extend/font/dtreefont.css">

    <!-- 图标 -->
    <link rel="stylesheet" href="../../static/CaoMei/style.css">
</head>

<body>

    <div class="yadmin-body animated fadeIn">
        <form class="layui-form yadmin-search-area input">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="visiterName" class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="visiterName" autocomplete="off"
                               id="visiterName" class="layui-input">
                    </div>

                    <label for="account" class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account" autocomplete="off"
                               id="account" class="layui-input">
                    </div>

                    <!--<label for="deptTree" class="layui-form-label">部门</label>-->
                    <!--<div class="layui-input-inline">-->
                        <!--<ul id="deptTree" class="dtree" data-id="0" data-value="请选择"></ul>-->
                        <!--<input type="hidden" id="deptId" name="deptId">-->
                    <!--</div>-->

                    <label for="status" class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" id="status">
                            <option value="">请选择</option>
                            <option value="1">需要组队</option>
                            <option value="0">不需要</option>
                        </select>
                    </div>

                    <button lay-submit="" lay-filter="search" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <table class="layui-hide" id="user-table"></table>
    </div>

    <script type="text/html" id="toolbar">

        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i>
            新增
        </button>

    </script>

    <script type="text/html" id="column-toolbar">

        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit" title="编辑"></i>
            编辑
        </button>

        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete" title="删除"></i>
            删除
        </button>


    </script>

    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{ d.status == '1' ? 'checked' : '' }}>
    </script>

    <script src="../../js/jquery.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/common.js"></script>

    <script>
        layui.config({
            base: '/layui/extend/'
        }).use(['table', 'element', 'form', 'dtree', 'tablePlug'], function () {
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;
            var dtree = layui.dtree;
            var tablePlug = layui.tablePlug;

            tablePlug.smartReload.enable(true);


            table.render({
                elem: '#user-table',
                url: '/visiter/findAll',
                page: true,
                toolbar: '#toolbar',
                smartReloadModel: true,
                cols: [
                    [
                        {type:'checkbox'},
                        {type: 'numbers', title: '序号', width: 60},
                        {field: 'id', title: 'ID', hide: true},
                        {field: 'name', title: '用户名', minWidth: 60},
                        {field: 'account', title: '账号', minWidth: 100},
                        {field: 'comment', title: '描述', minWidth: 120},
                        {field: 'age', title: '年龄', align: 'center', width: 60},
                        {field: 'sex', title: '性别',align: 'center', width: 60},
                        {field: 'createTime', title: '创建时间', align: 'center', width: 120},
                        {field: 'updateTime', title: '更新时间', align: 'center', width: 120},
                        {field: 'status', title: '组队', align: 'center', width: 60},
                        {field: 'teamMessage', title: '组队信息', align: 'center', width: 120},
                        {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                    ]
                ],id:'user-table',
                done: function (res,curr,count) {
                    $("[data-field='sex']").children().each(function(){
                        if($(this).text()=='0'){
                            $(this).text("男")
                        }else if($(this).text()=='1'){
                            $(this).text("女")
                        }else  if($(this).text()=='-1'){
                            $(this).text("保密")
                        }
                    }),$("[data-field='age']").children().each(function(){
                        if($(this).text()=='-1'){
                            $(this).text("保密")
                        }
                    }),$("[data-field='status']").children().each(function(){
                        if($(this).text()=='1'){
                            $(this).text("求组队")
                        }else if($(this).text()=='0'){
                            $(this).text("不求")
                        }
                    })
                }
            });

            var active = {
                reload: function () {
                    var visiterName = $('#visiterName');
                    var account = $('#account');
                    var status = $('#status');
                    table.reload('user-table',{
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: {
                                visiterName:  visiterName.val()	,
                                account: account.val(),
                                status: status.val()//在表格中进行搜索
                            }
                        }
                    )
                }
            };
            $('.layui-inline .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            // // 账号状态(正常/锁定)点击事件
            // form.on('switch(status)', function(data){
            //     if (data.elem.checked) {
            //         parent.layer.msg("激活成功", {icon: 6});
            //     } else {
            //         parent.layer.msg("禁用成功", {icon: 6});
            //
            //     }
            // });


            // 工具条点击事件
            table.on('toolbar', function (obj) {
                var data = obj.data;
                var event = obj.event;

                if (event === 'add') {
                    layer.open({
                        content: "/view/user/user-add.html",
                        title: "新增用户",
                        area: ['40%', '85%'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            table.reload('role-table');
                        }
                    });
                }
            });

            // 行点击事件
            table.on('tool', function (obj) {
                var data = obj.data;
                var event = obj.event;
                if (event === 'edit') {
                    edit(data.id);
                } else if (event === 'del') {
                    layer.confirm("确定删除用户吗?", {icon: 3, title: '提示'},
                        function (index) {
                            $.ajax({
                                url: "/visiter/delete/"+data.id,    //这个是后台的路由地址
                                type: "POST",
                                // data:{"id":data.id},//传给后台的值
                                dataType: "json",
                                success: function(data){
                                    if(data['code']==0){   //从前台取回的状态值
                                        layer.close(index);
                                        //同步更新表格和缓存对应的值
                                        obj.del();
                                        layer.msg("删除成功", {icon: 6});
                                        table.reload('user-table');

                                    }else{
                                        layer.msg("删除失败", {icon: 5});
                                        table.reload('user-table');

                                    }
                                }
                            });
                        }
                    );
                }
            });


            function edit(id) {
                layer.open({
                    content: '/visiter/findOne/' + id,
                    title: "编辑",
                    area: ['40%', '85%'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('user-table');
                    }
                });
            }
            form.on('submit(search)', function (form) {
                table.reload('user-table', {
                    where: form.field
                });
                return false;
            });
        });
    </script>
</body>
</html>